<template>
  <el-select
    v-model="formModel[item.modelName]"
    :placeholder="item.placeholder"
    :remote="item.remote ? item.remote : remote"
    :disabled="item.disabled"
    :loading="item.loading ? item.loading : loading"
    :collapse-tags="item.collapseTags"
    :allow-create="allowCreate"
    :remote-method="remoteMethod"
    :popper-append-to-body="item.popperAppendToBody === false ? false : true"
    :style="`${
      'width:' + (item.width || '200px')
    };margin-left:${item.marginLeft};`"
    :clearable="item.clearable"
    popper-class="ax-droplevel"
    @change="
      (val) => {
        changeSelect(val);
      }
    "
    @visible-change="
      (val) => {
        visibleChange(val);
      }
    "
    :value-key="item.modelName"
    :multiple-limit="multipleLimit"
    :multiple="item.isOpenMultiple || isOpenMultiple"
    :filterable="filterable"
  >
    <el-option
      v-for="(ite, index) in optionData"
      :key="index"
      :label="ite.optionsName"
      :value="ite.optionsId"
    ></el-option>
  </el-select>
</template>

<script>
/* select基础组件 提供template\props\data,继承后根据业务需求修改 */
/* optionData 渲染数据 */
export default {
  name: "SelectBasice",
  props: ["formModel", "item", "change", "params", "addAll"],
  data() {
    return {
      optionData: [],
      isOpenMultiple: false,
      allowCreate: false,
      multipleLimit: 0,
      filterable: false,
      clearable: true,
      loading: false,
      remote: false,
      time: "",
    };
  },
  methods: {
    changeSelect(val) {
      this.item.change && this.item.change(val);
    },
    visibleChange(val) {
      this.item.visibleChange && this.item.visibleChange(val);
    },
    remoteMethod() {},
  },
};
</script>
